<script lang="ts" setup>
import { RootHandle } from "@/type/view";
import { ref } from "vue";
import { TreeNodeModel } from 'tdesign-vue-next'
import { FileIcon, FolderOpenIcon, FolderIcon } from 'tdesign-icons-vue-next';
import { uuid } from '@/unit/uuid';
declare global {
  interface Window {
    showDirectoryPicker: () => Promise<RootHandle>;
  }
}


const list = ref<Array<RootHandle>>([]);

const onClick = async () => {
  try {
    // 选择文件夹
    console.log('选择文件')
    const handle = await window.showDirectoryPicker();
    console.log('---', handle)
    const root = await processHandle(handle);
    list.value = root.children!;
    console.log(root);
    // 选择文件
    // window.showOpenFilePicker()
  } catch {
    // 用户拒绝的处理
  }
};

// 处理句柄
const processHandle = async (handle: RootHandle): Promise<RootHandle> => {
  handle.id = uuid()
  if (handle.kind === "file") {
    return handle;
  }
  handle.children = [];
  // 得到异步迭代器
  const iter = handle.entries();
  for await (const item of iter) {
    handle.children.push(await processHandle(item[1]));
  }
  return handle;
};

const color = (node: TreeNodeModel) => {
  if (node.data.kind === 'directory') return '#fff'
  if (node.data.kind === 'file' && node.data.id === active.value?.id) return 'rgb(18, 183, 128)'
  return '#333'
}

const active = ref<RootHandle>()
interface Node {
  node: TreeNodeModel<RootHandle>
  e: MouseEvent
}
const treeClick = async (value: Node) => {
  active.value = value.node.data
  if (active.value.kind === 'file') {
    const file = await active.value.getFile()
    const reader = new FileReader()
    reader.readAsText(file, 'utf-8')
    reader.onload = e => {
      text.value = e.target?.result as string
    }
  }
}

const text = ref<string>('')
</script>

<template>
  <div>
    <t-button @click="onClick" style="margin-bottom: 16px;">选择文件夹查看文件</t-button>
    <div class="tree">
      <t-tree :data="list" line expandOnClickNode @click="treeClick">
        <template #icon="{ node }">
          <file-icon v-if="node.data.kind === 'file'"></file-icon>
          <folder-open-icon v-if="node.expanded && node.data.kind === 'directory'"></folder-open-icon>
          <folder-icon v-if="!node.expanded && node.data.kind === 'directory'"></folder-icon>
        </template>
        <template #label="{ node }">
          <p :class="node.data.kind" :style="{ color: color(node) }">
            {{ node.data.name }}
          </p>
        </template>
      </t-tree>
      <div class="flexConter">
        <highlightjs language="rust" :code="text"></highlightjs>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tree {
  display: flex;

  .file {
    padding: 8px 16px;
    width: 100%;
    border-radius: 8px;
    background-color: #fff;
    transition: all 0.3s;
    cursor: pointer;
  }

  .file:hover {
    background-color: #eee;
  }

  .active {
    color: rgb(18, 183, 128) !important;
  }

  .directory {
    padding: 8px 16px;
    width: 200px;
    border-radius: 8px;
    background-color: #333;
    color: #fff;
    transition: all 0.3s;
    cursor: pointer;
  }

  .directory:hover {
    background-color: #444;
  }

  .flexConter {
    flex: 1;
    border-radius: 8px;
    background: #282C34;
    margin: 8px;
    padding: 24px;
  }
}</style>
